<template>
	<view style="background: #f6f6f6;max-width: 100vw;overflow-x: hidden;">
    <img style="width: 100%" src="https://hyxs.ychlkj.cn/uploads/20240110/21457540256eb9d04e606c87dba88247.png">
<!--    <view style="background-image: url('https://hyxs.ychlkj.cn/uploads/20240110/21457540256eb9d04e606c87dba88247.png')"></view>-->
		<view class="" style="padding-bottom: 10vh;">


      <view style="position: absolute; top: 55px; width: 100%;left: 15px">
        <img style="width: 32px;height: 32px" src="https://hyxs.ychlkj.cn/uploads/20240111/f454492ca519145cda3e68421e6d5e20.png">
      </view>
<!--			<view class="details">-->
<!--				<image  style="width: 100%; height: 100%;" :src="`${yourBaseURL}${listName.mian_image}`" ></image>-->
<!--			</view>-->
			<view class="" style="position: absolute; top: 55px; width: 100%;">
				<view class=""
					style=" width: 90%; margin: auto; padding-top: 40rpx;display: flex;align-items: center;justify-content: space-between; ">
					<!-- <image @click="toReturn" style="width: 50rpx; height: 50rpx;" src="../../../static/images/goBack.png"></image> -->
					<image @click="toReturn" style="width: 50rpx; height: 50rpx;" src="../../../static/images/books/fanhui.png"></image>
					<!-- <p @click="openPopup">书籍评分</p> -->
				</view>


				<view class="" style="display: flex;justify-content: left; margin: 20rpx auto ; width: 90%; height: 200rpx;">
          <img style="width: 95px;height: 130px" :src="yourBaseURL + listName.mian_image">
          <view style="margin-left: 20px">
            <view style="margin-top: 10px;color: #333333;font-size: 20px;font-weight: 600">{{listName.title}}</view>
            <view style="margin-top: 10px;color: #AAAAAA;">{{listName.author}} 著</view>
            <view style="width: 100px;margin-top: 10px;color: #E95318;background: linear-gradient(93deg, #f3d3c4 0%, #f1c4c2 100%);border-radius: 4px;text-align: center;font-size: 14px;padding: 3px 6px">阅读人气榜单</view>
          </view>
				</view>
			</view>
			<!--  -->
			<!-- <view class=""
				style="display: flex; align-items: center; justify-content: space-around; height: 150rpx; background: #fff; width: 90%;auto;border-radius: 20rpx; position: absolute; top: 330rpx; left: 50%; transform: translate(-50%);">
				<view class="" style="text-align: center;">
					<p style="font-size: 40rpx;font-weight: 600;">9分</p>
					<p style="font-size: 20rpx;">评分</p>
				</view>
				<view class="" style="text-align: center;">
					<p style="font-size: 40rpx;font-weight: 600;">43.24万字</p>
					<p style="font-size: 20rpx;">万字</p>
				</view>
			</view> -->
			<!-- 简介 -->


      <view style="display: flex;justify-content: space-around;padding-top: 20px">
        <view style="text-align: center">
          <view style="font-size: 14px;color: rgba(32,32,32,0.5)">评分</view>
          <view style="font-size: 22px;font-weight: 600">{{listName.score}}</view>
        </view>
        <view style="text-align: center">
          <view style="font-size: 14px;color: rgba(32,32,32,0.5)">在读人数</view>
          <view style="font-size: 22px;font-weight: 600">{{listName.people_num}}</view>
        </view>
        <view style="text-align: center">
          <view style="font-size: 14px;color: rgba(32,32,32,0.5)">章节数</view>
          <view style="font-size: 22px;font-weight: 600">{{listName.verse}}</view>
        </view>
        <view style="text-align: center">
          <view style="font-size: 14px;color: rgba(32,32,32,0.5)">更新状态</view>
          <view style="font-size: 22px;font-weight: 600 " v-if="listName.renew==1">完结</view>
          <view style="font-size: 22px;font-weight: 600 " v-if="listName.renew==0">连载中</view>
        </view>
      </view>

			<view class=""
				style="height: 410rpx; background: #fff; width: 90%; border-radius: 20rpx; margin:20px auto 20rpx;">
				<view style="padding: 12px;font-size: 20px;font-weight: 600">简介</view>
        <view style="width: 95%;margin: auto;display: flex">
          <view style="margin-right: 6px;color: #E95318;background: linear-gradient(93deg, #f3d3c4 0%, #f1c4c2 100%);width: 70px;border-radius: 4px;text-align: center;font-size: 14px;padding: 3px 6px">{{listName.catename}}</view>
<!--          <view style="margin-right: 6px;color: #E95318;background: linear-gradient(93deg, #f3d3c4 0%, #f1c4c2 100%);width: 70px;border-radius: 4px;text-align: center;font-size: 14px;padding: 3px 6px">推理悬疑</view>-->
<!--          <view style="margin-right: 6px;color: #E95318;background: linear-gradient(93deg, #f3d3c4 0%, #f1c4c2 100%);width: 70px;border-radius: 4px;text-align: center;font-size: 14px;padding: 3px 6px">推理悬疑</view>-->
<!--          <view style="margin-right: 6px;color: #E95318;background: linear-gradient(93deg, #f3d3c4 0%, #f1c4c2 100%);width: 70px;border-radius: 4px;text-align: center;font-size: 14px;padding: 3px 6px">推理悬疑</view>-->
        </view>

				<view style=" width: 90%; margin: 6px auto;padding: 6px 0">
					<view
						style="display: block; white-space: pre-wrap; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis;-webkit-line-clamp: 4;-webkit-box-orient: vertical;display: -webkit-box;">
<!--						<span>主角:{{listName.author}}</span>-->
<!--            <view style="">简介:</view>-->
            <rich-text :nodes="listName.jie"></rich-text>
<!--            <span style="margin-left: 10rpx;">简介:{{listName.jie}}</span>-->
					</view>
					<!-- <view class="">
						<image style="width: 30rpx; height: 30rpx;" src="../../../static/images/user/xia.png"></image>
					</view> -->
				</view>
			</view>
			<!-- 目录 -->
			<view class=""
				style="width: 90%;background: #fff; margin: auto; border-radius: 20rpx;">
				<view class="" style="display: flex; align-items: center;">
          <view style="padding: 12px;font-size: 20px;font-weight: 600">目录</view>
<!--					<p>共{{listName.verse}}章</p>-->
				</view>

        <view style="height: 250px;overflow-y: auto;">
          <view @click="toRead(item)" style="padding: 10px 12px;color: #777777;font-size: 14px" v-for="(item,index) in listName.jieList">
            {{item.title}}
          </view>
        </view>
			</view>
			<!-- 介绍 -->
		</view>
		<!-- 底部导航 -->
		<view class=""
			style="width: 100%;height: 80px; background: #fff; position: fixed; bottom: 0; display: flex;align-items: center; justify-content: space-around;padding-bottom: 20px">
			<view v-if="isHhelf==0" @click="toHhelf()"  class="" style="text-align: center;height: 80rpx;">
				<image style="text-align: center; width: 50rpx; height: 50rpx;"
					src="../../../static/images/books/shujia.png"></image>
				<p style="font-size: 20rpx; color:#e25f5f ;">加入书架</p>
			</view>
			<view v-else  class="" style="text-align: center;height: 80rpx;">
				<image style="text-align: center; width: 50rpx; height: 50rpx;"
					src="../../../static/images/books/shujia.png"></image>

				<p style="font-size: 20rpx; color:#ccc ;">已加入书架</p>
			</view>
			<p  @click="toyuedu()" style="width: 60%;font-size: 14px;
			background: linear-gradient(93deg, #E66D39 0%, #E13333 100%);
			 height: 40px; text-align: center; line-height: 40px; border-radius:4px; color: #fff;">开始阅读</p>

		</view>
		<!-- 底部弹窗功能 -->

		<!-- 查看章节 弹窗-->

		<uni-popup ref="popup" type="left">

			<view class="popup-inner1">

				<view class="" style="display: flex; align-items: center;">
					<view class="" style="padding: 40rpx;">
						<image style=" height: 150rpx; width: 100rpx;" :src="`${yourBaseURL}${listName.mian_image}`"></image>
					</view>
					<view class="">
						<h3>{{listName.title}}</h3>
						<p style="font-size: 20rpx; color:#959595;">作者：{{listName.lead}}</p>
					</view>
				</view>
				<view class=""
					style=" display: flex; justify-content: space-between; align-items: center; width: 90%; margin: auto;">
					<p style="color:#959595;">共{{listName.verse}}章</p>
					<view class="" v-if="orderID==2"  @click=" toOrder(1)">
						<image style="width: 80rpx; height: 80rpx;" src="../../../static/images/shunxu.png"></image>
					</view>
					<view class="" v-else @click=" toOrder(2)">

						<image style=" transform: rotate(180deg); width: 80rpx; height: 80rpx;"
							src="../../../static/images/shunxu.png"></image>
					</view>
				</view>

				<view class="" >
					<scroll-view scroll-y="false" class="scroll-Y" @scrolltolower ="tolower">
						<view class="classiftBttR" style="padding-bottom: 20vh;">
							<view class="" style="border-bottom: 2rpx solid #ccc; background: #f8f8f8;"
							v-for="(item ,index) in jieList" @click="toJieList(item,index)">
								<view class="" style="display: flex; align-items: center;">
									<view class="" style="margin-left: 10rpx; display: flex; justify-content: space-between;
									 height: 100rpx; width: 100%;line-height: 100rpx;">
										<p style="font-size: 20rpx; color: #6f6f6f;">{{item.title}}</p>
										 <!-- <p style="font-size: 20rpx; margin-right: 20rpx; color: #6f6f6f;">免费</p> -->
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import {getMyBookInfo ,getMyAddShelf} from '@/http/api.js'
	export default {
		data() {
			return {
				orderID:1,
				zhangId:'',
				isHhelf:'',
				yourBaseURL: 'http://hyxs.ychlkj.cn',
				showPopup: false,
				scrollTop: 0,
				book_id:'',
				listName:{},
				content:'',
				lengthid:1,
				userInfo : uni.getStorageSync('userInfo'),
				sort:'asc',
				orderA:true,
				jieList:[],
			};
		},
		onLoad(e) {
			this.book_id = e.id
			this.MyBookInfo()

			console.log(e ,"book_id");
		},

		methods: {
      //点章节去阅读
      toRead(item){
        // uni.navigateTo({
        //   url: '../read/read?idA=' + item.id + '&idB=' + this.book_id
        // })
      },
			toOrder(i){
				this.orderA =false
				this.lengthid=1
				this.jieList= []
				if(i==1){
					this.orderID = 1
					console.log(1);
					this.sort= 'asc'
				}else if(i==2){
						this.orderID = 2
						this.sort= 'desc'
					console.log(2);
				}

				this.MyBookInfo()
			},
			tolower(){
				this.orderA=true
				this.MyBookInfo()
			},
			toyuedu(){
				uni.navigateTo({
						 // url: '/pages/books/books?idA='+this.zhangId
					// url: '../books1/books1?idA=' + this.zhangId + '&idB=' + this.book_id
					 url: '../read/read?idA=' + this.zhangId + '&idB=' + this.book_id

				})
			},
			// 详情接口
			MyBookInfo(){

				let data = {
					"token": uni.getStorageSync('token'),
					"id": this.book_id,
					"page":this.lengthid,
					"sort":this.sort
				}
				getMyBookInfo(data).then((res) => {
          console.log('书籍详情',res)
					this.listName = res.data
					 const newData = res.data.jieList
					// this.jieList = res[1].data.data.jieList
          this.zhangId = newData[0].id
					console.log(this.jieList,"[[[]]]");
					this.isHhelf = res.data.is_shelf
					this.zhangId = res.data.zhang.id
					this.content = res.data.zhang.content
					 this.jieList.push(...newData);
					 const nameSet = new Set(); // 使用 Set 来记录不重复的 name 值
					 this.directoryList = this.jieList.map((item, index) => ({
					   index: index,
					   chapterId: item.id,
					   name: item.title
					 })).filter(item => {
						 // console.log(item);
					   if (nameSet.has(item.chapterId)) {
					     // console.log(`重复的 name 值已剔除：${item.name}`);
					     return false; // 过滤掉重复的项
					   }
					   nameSet.add(item.name);
					   return true;
					 });
					console.log(this.orderA,"====");
					if(this.orderA==true){
						console.log("**************");
						 this.lengthid += 30;
					}else if(this.orderA==false){
						this.lengthid=1
					}

					console.log(this.lengthid,"[]");


				})
			},
			// 加入书架
			toHhelf(){
				this.MyAddShelf()
			},
			// 加入书架接口
			MyAddShelf(){
				let data = {
					"token": uni.getStorageSync('Token'),
					"id": this.book_id
				}
				getMyAddShelf(data).then((res)=>{
					console.log(res[1].data,"加入书架接口");
					if(res[1].data.code==1){


						this.MyBookInfo()
					}
				})
			},
			// 打开底部弹窗
			// openPopup() {
			// 	this.showPopup = true;
			// },
			// 关闭底部弹窗
			// closePopup() {
			// 	this.showPopup = false;
			// },
			// 左侧弹窗
			toPopup() {
				this.$refs.popup.open('left')
			},
			// 阅读


			//返回上一页
			toReturn() {
				uni.navigateBack();
			},
			// 点击章节
			toJieList(item,index){
				console.log(item,index);
				uni.navigateTo({
					url:'/pages/books/read/read?idC='+index + '&idB=' + this.book_id+'idA='+ this.zhangId
				})

			}
		}

	}
</script>

<style lang="scss" scoped>
	.details {
		 position: relative;
		width: 100vw;
		height: 400rpx;


		  filter: blur(5px); /* 设置模糊度 */
	}
	.details::before {
		z-index: 999;
	  content: '';
	  position: absolute;
	   top: 0px;
	  left: 0;
	  width: 100%;
	  height: 400rpx;
	  background-color: rgba(0, 0, 0, 0.7); /* 设置背景色和透明度 */
	}

	.page {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.open-button {
		padding: 10px 20px;
		background-color: #409eff;
		color: #ffffff;
		border: none;
		border-radius: 4px;
	}

	.popup-container {
		position: fixed;
		top: 0rpx;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.popup-inner {
		width: 100%;
		height: 250px;

		// padding:  20px 20px 0 20px;
		background-color: #ffffff;
		border-radius: 4px;
		position: absolute;
		bottom: 0rpx;

		// text-align: center;
	}

	.popup-inner1 {
		width: 300px;

		// padding:  20px 20px 0 20px;
		background-color: #ffffff;
		border-radius: 4px;



		// text-align: center;
	}

	.close-button {
		 margin-top: 10px;
		padding: 10px 20px;
		background-color: #909399;
		color: #ffffff;
		border: none;
		border-radius: 4px;
	}

	.classiftBttR {
		background-color: #ffffff;
		border-radius: 10px;
		box-sizing: border-box;
		 // padding: 2vw 1vw;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.scroll-view-item {
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.scroll-Y {
	height:  100vh;
	// padding-bottom: 100vh;
	// margin-bottom: 10vh;

	}
</style>
